// custom-tab-bar/index.js
import {
    storeBindingsBehavior
} from 'mobx-miniprogram-bindings'
import {
    store
} from '../store/store'
Component({
    behaviors: [storeBindingsBehavior],
    storeBindings: {
        store, //指定要绑定的store
        fields: {
            sum: 'sum',
            active:'activeTabBarIndex'
        },
        actions: {
            updataActive:'updatActiveTabBarIndex'
        }
    },
    observers: {
        "sum": function (val) {
            this.setData({
                'list[1].info': val
            })
        }
    },
    options: {
        styleIsolation: 'shared'
    },
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        // 懂了，因为不同页面的数据一开始是不共享的，当使用页面跳转后，会出现active的错乱。因此需要将active存入全局共享的store里，并利用自定义的update函数进行更新
        // 原因是switchtab引起的，第一次点击的更新数据无效，只能完成页面的跳转
        // 自己去tabbar生命周期log一下 再切换下页面 你就知道每次跳转tabbar都会被重新创建了 active会一直是0 把他定义在全局store 才能实现同步切换
        // active: 0,
        "list": [{
                "pagePath": "/pages/home/home",
                "text": "首页",
                "iconPath": "/images/tabs/home.png",
                "selectedIconPath": "/images/tabs/home-active.png"
            },
            {
                "pagePath": "/pages/message/message",
                "text": "消息",
                "iconPath": "/images/tabs/message.png",
                "selectedIconPath": "/images/tabs/message-active.png",
                info: 2
            },
            {
                "pagePath": "/pages/contact/contact",
                "text": "联系我们",
                "iconPath": "/images/tabs/contact.png",
                "selectedIconPath": "/images/tabs/contact-active.png"
            }
        ]
    },

    /**
     * 组件的方法列表
     */
    methods: {
        onChange(event) {
            // event.detail 的值为当前选中项的索引
            // this.setData({
            //     active: event.detail
            // });
            this.updataActive(event.detail)
            // 页面跳转
            wx.switchTab({
              url: this.data.list[event.detail].pagePath,
            })
        },
    }
})